<template>
  <div>
    <div class="iconfont add" @click="addGoodsToCart">&#xe659;</div>
    <div class="goods_count" v-show="count">{{ count }}</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'AddCart',
  props: ['good', 'id'],
  computed: {
    ...mapState(['cartGoods']),
    count () {
      const id = this.cartGoods.findIndex(item => item.goods_id === this.id)
      if (id !== -1) {
        return this.cartGoods[id].count
      } else {
        return 0
      }
    }
  },
  methods: {
    addGoodsToCart () {
      this.$store.commit('addGoodsToCart', this.good)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/styles/goods.css';
</style>
